<template>
    <div class="m_login">
        <mt-header title="注 册"></mt-header>
        <div class="m_logo">
            <img :src="$store.state.logo" alt="">
        </div>
        <div class="m_login-form">
            <mt-field label="邮箱" placeholder="请输入邮箱" :state="formStatus.mail" v-model="formRegister.mail"></mt-field>
            <!--<mt-field label="验证码" :state="formStatus.verifyCode" v-model="formRegister.verifyCode">-->
                <!--<button class="m_authcode_btn" @click="authCodeBtnClick" ref="btn">获取验证码</button>-->
            <!--</mt-field>-->
            <mt-field label="密码" placeholder="请输入密码" type="password" :state="formStatus.pwd" v-model="formRegister.pwd"></mt-field>
            <mt-field label="确认密码" placeholder="请输入确认密码" type="password" :state="formStatus.confirmPassword" v-model="formRegister.confirmPassword"></mt-field>
<!--            <mt-field label="邀请码" placeholder="请输入邀请码" v-model="formRegister.inviterCode"></mt-field>-->
        </div>

        <mt-button type="primary" size="large" @click.native="onSubmit">注册</mt-button>
        <p class="m_go-login">
            <router-link to="/m/login">
                <el-button type="text">已有账号，<b>去登录</b></el-button>
            </router-link>
        </p>
    </div>
</template>

<script>

    import { MessageBox } from 'mint-ui'

    export default {
        name: "Register",
        data() {
            return {
                formRegister: {
                    mail: "",
                    verifyCode: "",
                    pwd: '',
                    confirmPassword: "",
                    inviterCode: this.$route.query.invite ? this.$route.query.invite : '',
                },
                formStatus: {
                    mail: "",
                    verifyCode: "",
                    pwd: "",
                    confirmPassword: "",
                },
                timerFlag: false,
            }
        },
        methods: {
            authCodeBtnClick() {
                if (this.formRegister.mail == "") {
                    this.formStatus.mail = 'warning';
                    this.$toast("email 不能为空");
                    return false;
                } else if (!emailReg.test(this.formRegister.mail)) {
                    this.formStatus.mail = 'error';
                    this.$toast({message: "请输入正确的 email", duration: 1000});
                    return false;
                } else {
                    this.formStatus.mail = 'success';
                    this.requestAxios.requestWeb('post', '/check_mail.do', {
                        mail: this.formRegister.mail
                    }, () => {
                        this.getAuthCode()
                    })
                }

            },
            getAuthCode() {
                let that = this;
                let num = 60;
                that.$refs.btn.disabled = true;
                that.$refs.btn.innerHTML = num + "s";
                let timer = setInterval(() => {
                    if(this.timerFlag){
                        clearInterval(timer);
                        return false;
                    }
                    if (num == 0) {
                        clearInterval(timer);
                        that.$refs.btn.disabled = false;
                        that.$refs.btn.innerHTML = "重新获取";
                    } else {
                        num--;
                        that.$refs.btn.innerHTML = num + "s";
                    }
                }, 1000);
                this.requestAxios.requestWeb('post', '/get_verify_code.do', {
                    mail: this.formRegister.mail
                }, (response) => {
                    this.$toast({message: '验证码已发送至邮箱'})
                })
            },
            onSubmit() {
                if (this.formRegister.mail == "") {
                    this.formStatus.mail = 'warning';
                    this.$toast("email 不能为空");
                    return false;
                } else if (!emailReg.test(this.formRegister.mail)) {
                    this.formStatus.mail = 'error';
                    this.$toast({message: "请输入正确的 email", duration: 1000});
                    return false;
                // } else if (this.formRegister.verifyCode == "") {
                //     this.formStatus.mail = 'success';
                //     this.formStatus.verifyCode = 'warning';
                //     this.$toast({message: "验证码不能为空", duration: 1000});
                //     return false;
                } else if (!passwordReg.test(this.formRegister.pwd)) {
                    this.formStatus.mail = 'success';
                    this.formStatus.verifyCode = 'success';
                    this.formStatus.pwd = 'error';
                    this.$toast({message: "密码长度要大于6位，由数字和字母组成", duration: 1000});
                    return false;
                } else if (this.formRegister.confirmPassword == "") {
                    this.formStatus.mail = 'success';
                    this.formStatus.verifyCode = 'success';
                    this.formStatus.pwd = 'success';
                    this.formStatus.confirmPassword = 'warning';
                    this.$toast({message: "确认密码不能为空", duration: 1000});
                    return false;
                } else if (this.formRegister.pwd != this.formRegister.confirmPassword) {
                    this.formStatus.mail = 'success';
                    this.formStatus.verifyCode = 'success';
                    this.formStatus.pwd = 'success';
                    this.formStatus.confirmPassword = 'error';
                    this.$toast({message: "两次密码不相同", duration: 1000});
                    return false;
                } else {
                    let params = {
                        mail: this.formRegister.mail,
                        verifyCode: this.formRegister.verifyCode,
                        pwd: this.$md5(this.formRegister.pwd),
                        inviterCode:this.formRegister.inviterCode,
                    };
                    console.log(params)
                    this.requestAxios.requestWeb('post', '/register.do', params, (response) => {
                        MessageBox.alert('注册成功，请登录').then( () =>{
                            this.timerFlag = true;
                            this.$router.push('/m/login')
                        })
                    })
                }
            }
        }
    }
</script>

<style>
    .mint-field-clear{
        opacity:.8!important;
    }
</style>
